<template>
	<view>
		<!-- 头部搜索框部分 -->
		<view class="searchInput">
			<view class="searchBox">
				<input type="text" value="" placeholder="请输入菜谱" v-model="searchVal" />
				<text @tap="search">搜索</text>
			</view>
		</view>
		<!-- 滑块跟标题部分 -->
		<template v-if="isShow">
			<view class="tips">
				<text>精品名厨视频-会员专享</text>
				<image src="../../static/images/mengbanzu282.png" mode=""></image>
			</view>
			<swiper class="swiper" next-margin="30rpx">
				<template>
					<swiper-item v-for="(item,index) in newMemberRecommend" :key="index">
						<view class="swiper-item main">
							<ul v-for="item1 in item" :key="item1._id">
								<li>
									<image :src="item1.coverpic" mode=""></image>
								</li>
								<li class="name">
									{{item1.name}}
								</li>
								<li class="lastLi">
									<view class="lastBox">
										<text>{{item1.pageview}}</text>
										<image src="../../static/images/liulan.png" class="image1"></image>
									</view>
									<view class="lastBox">
										<text>{{item1.collections}}</text>
										<image src="../../static/images/shoucamg.png" class="image2"></image>
									</view>
								</li>
							</ul>
						</view>
					</swiper-item>
				</template>
			
			
			</swiper>
			<!-- 下面列表部分 -->
			<view class="list">
				<view class="listImage">
					<image src="../../static/images/1-huifude@3x.png" mode=""></image>
				</view>
				<ul>
					<li class="first">蜜豆鲷鱼烧</li>
					<li class="secend">鸡蛋、低筋面粉、玉米淀粉...</li>
					<li class="lastLi">
						<view class="lastBox">
							<text>10.5万</text>
							<image src="../../static/images/liulan.png" class="image1"></image>
						</view>
						<view class="lastBox">
							<text>3187</text>
							<image src="../../static/images/shoucamg.png" class="image2"></image>
						</view>
					</li>
				</ul>
			</view>
			<view class="list">
				<view class="listImage">
					<image src="../../static/images/1-huifude@3x.png" mode=""></image>
				</view>
				<ul>
					<li class="first">蜜豆鲷鱼烧</li>
					<li class="secend">鸡蛋、低筋面粉、玉米淀粉...</li>
					<li class="lastLi">
						<view class="lastBox">
							<text>10.5万</text>
							<image src="../../static/images/liulan.png" class="image1"></image>
						</view>
						<view class="lastBox">
							<text>3187</text>
							<image src="../../static/images/shoucamg.png" class="image2"></image>
						</view>
					</li>
				</ul>
			</view>
			<view class="list">
				<view class="listImage">
					<image src="../../static/images/1-huifude@3x.png" mode=""></image>
				</view>
				<ul>
					<li class="first">蜜豆鲷鱼烧</li>
					<li class="secend">鸡蛋、低筋面粉、玉米淀粉...</li>
					<li class="lastLi">
						<view class="lastBox">
							<text>10.5万</text>
							<image src="../../static/images/liulan.png" class="image1"></image>
						</view>
						<view class="lastBox">
							<text>3187</text>
							<image src="../../static/images/shoucamg.png" class="image2"></image>
						</view>
					</li>
				</ul>
			</view>
			<view class="list">
				<view class="listImage">
					<image src="../../static/images/1-huifude@3x.png" mode=""></image>
				</view>
				<ul>
					<li class="first">蜜豆鲷鱼烧</li>
					<li class="secend">鸡蛋、低筋面粉、玉米淀粉...</li>
					<li class="lastLi">
						<view class="lastBox">
							<text>10.5万</text>
							<image src="../../static/images/liulan.png" class="image1"></image>
						</view>
						<view class="lastBox">
							<text>3187</text>
							<image src="../../static/images/shoucamg.png" class="image2"></image>
						</view>
					</li>
				</ul>
			</view>
		</template>
		
		<template v-else>
			<view class="list" v-for="item in searchData" :key="item._id">
				<view class="listImage">
					
					<image :src="item.coverpic"  v-if="item.coverpic"></image>
					<image src="../../static/images/2@3x.png"  v-else></image>
				</view>
				<ul>
					<li class="first">{{item.name}}</li>
					<!-- <li class="secend">鸡蛋、低筋面粉、玉米淀粉...</li> -->
					<li class="lastLi">
						<view class="lastBox">
							<text>10.5万</text>
							<image src="../../static/images/liulan.png" class="image1"></image>
						</view>
						<view class="lastBox">
							<text>3187</text>
							<image src="../../static/images/shoucamg.png" class="image2"></image>
						</view>
					</li>
				</ul>
			</view>
		</template>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				memberRecommend: [], //获取推荐名厨视频
				newMemberRecommend: [],//筛选后的名厨推荐视频
				isShow:true,//展示搜索列表还是展示默认列表
				searchVal:"",//搜索框的值
				pageSize:"12",//每页显示条数
				currentPage:"1",//当前页数
				total:0,//总条数
				searchData:[],//搜索后获取的数组值
			}
		},
		onLoad() {
			console.log(888888)
			this.getMemberRecommend();
		},
		methods: {
			async getMemberRecommend() {
				const res = await this.$request({
					url: "/search/memberRecommend"
				})
				if (res.meta.status === 200) {
					this.memberRecommend = res.message;
					this.splitArr(res.message,2);
				}
			},
			//将数组均分成多个数组
			splitArr(arr, num) {
				console.log(arr,'888888888888')
				const newArr = [];
				for (let i = 0; i < arr.length; i += num) {
					newArr.push(arr.slice(i, i + num))
				};
				console.log(newArr,'888888888888')
				this.newMemberRecommend = newArr;
			},
			//获取搜索的商品列表
			async getSearchData(){
				const res = await this.$request({
					url:"/search/searchMenu",
					method:"POST",
					data:{
						pageSize:this.pageSize,
						currentPage:this.currentPage,
						val:this.searchVal
					}
				});
				if(res.meta.status === 200){
					this.total = res.total
					this.searchData=res.menus;
					uni.stopPullDownRefresh();
				}
			},
			//点击搜索
			search(){
				this.isShow=false;
				this.getSearchData();
			},
			
			onPullDownRefresh(){
				console.log("下拉刷新");
				if(this.currentPage>1){
					this.currentPage--;
					this.getSearchData();
				}else{
					uni.showToast({
						title:"没有更多了",
						duration: 2000
					})
				}
			},
			//触底触发
			onReachBottom(){
				console.log("触底了");
				if(this.total>this.searchData.length){
					this.currentPage++;
					this.getSearchData();
				}else{
					uni.showToast({
						title:"没有更多了",
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style scoped>
	/* 头部搜索框部分 */
	.searchInput {
		background-color: #ee8131;
		height: 90rpx;
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.searchBox {
		display: flex;
		width: 83%;
		justify-content: center;
		align-items: center;
		justify-content: space-between;
	}

	.searchBox input {
		background-color: #FFFFFF;
		width: 538rpx;
		height: 60rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding-left: 60rpx;
		position: relative;

	}

	.searchBox input::before {
		content: "";
		width: 32rpx;
		height: 32rpx;
		/* background-color: #4CD964; */
		position: absolute;
		left: 20rpx;
		top: 15rpx;
		background-image: url(../../static/images/souuo.png);
	}

	.searchBox text {
		color: #FFFFFF;
	}

	/* 滑块跟标题部分 */
	.tips {
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: flex-start;
		width: 700rpx;
		margin: 0 auto;
		box-sizing: border-box;
		height: 50rpx;
	}

	.tips image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 14rpx;
	}

	.swiper {
		height: 350rpx;
		width: 700rpx;
		margin: 0 auto;
	}

	.main {
		width: 700rpx;
		/* height: 300rpx; */
		margin: 0 auto;
		/* background-color: #007AFF; */
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;

	}

	.main ul {
		width: 316rpx;
		height: 334rpx;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		border-radius: 8rpx;
		margin-right: 20rpx;
		position: relative;
	}

	.main ul::after {
		content: "";
		width: 82rpx;
		height: 24rpx;
		background-image: url(../../static/images/zu474.png);
		position: absolute;
		right: 10rpx;
		bottom: 100rpx;
		border-radius: 50rpx;
	}

	.main ul li image {
		width: 316rpx;
		height: 248rpx;
		border-radius: 8rpx;
	}

	.lastLi {
		margin-top: 10rpx;
		width: 80%;
		display: flex;
		justify-content: space-between;
	}

	.lastLi text {
		color: #C0C0C0;
		font-size: 24rpx;
	}

	.lastBox {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.lastBox text {
		margin-right: 10rpx;
	}

	.main ul li .image1 {
		width: 28rpx;
		height: 22rpx;
	}

	.main ul li .image2 {
		width: 24rpx;
		height: 24rpx;
	}

	.name {
		font-size: 24rpx;
	}

	/* 下面列表部分 */
	.list {
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		box-sizing: border-box;
		margin-bottom: 16rpx;
	}

	.listImage {
		width: 314rpx;
		height: 210rpx;
		background-color: #007AFF;
		border-radius: 16rpx;
		margin-right: 18rpx;
	}

	.listImage image {
		width: 316rpx;
		height: 210rpx;
	}

	.list ul {
		width: 300rpx;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.list ul li .image1 {
		width: 28rpx;
		height: 22rpx;
	}

	.list ul li .image2 {
		width: 24rpx;
		height: 24rpx;
	}

	.first {
		font-size: 26rpx
	}

	.secend {
		font-size: 22rpx;
		color: #C0C0C0;
	}
	
</style>
